@page
@{ Layout = "_LayoutHome"; }
@section Styles{
  <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
  <link href="/sitefiles/assets/css/siteserver.min.css" rel="stylesheet" type="text/css" />
  <style>
    .ion-person:before,
    .ion-locked:before,
    .ion-image:before {
      width: 20px;
      font-size: 18px;
    }
  </style>
}

<div class="wrapper-page">
  <div class="card-box">

    <h4 class="m-l-5">{{ homeTitle }}</h4>

    <form v-on:submit="btnLoginClick" class="form-horizontal m-t-20" method="post">

      <div class="form-group row">
        <div class="col-12">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                  <i class="fa fa-user-circle-o"></i>
              </span>
            </div>
            <input v-model="account" :class="{ 'is-invalid': pageSubmit && !account }" class="form-control" type="text" v-focus placeholder="请输入用户名/手机号/邮箱" autocomplete="off">
          </div>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-12">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                  <i class="fa fa-key"></i>
              </span>
            </div>
            <input v-model="password" :class="{ 'is-invalid': pageSubmit && !password }" class="form-control" type="password" placeholder="请输入密码" autocomplete="off">
          </div>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-12">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                  <i class="fa fa-picture-o"></i>
              </span>
            </div>
            <input v-model="captchaValue" :class="{ 'is-invalid': pageSubmit && !captchaValue }" class="form-control" type="text" placeholder="请输入验证码">
          </div>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-6"></div>
        <div class="col-6">
          <a href="javascript:;" v-on:click="reload">
            <img v-show="captchaUrl" style="display: none" class="float-right rounded" :src="captchaUrl" align="absmiddle">
          </a>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-12">
          <button v-on:click="btnLoginClick" style="width: 100%" class="btn btn-primary btn-large btn-custom w-md" type="submit">
            登 录
          </button>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-12">
          <button v-on:click="btnRegisterClick" style="width: 100%" class="btn btn-default btn-large btn-custom w-md" type="submit">
            注 册
          </button>
        </div>
      </div>
      <!-- <div class="form-group row">
        <div class="col-12 text-right">
          <a href="pages-recoverpw.html" class="text-primary">
            <i class="fa fa-lock m-r-5"></i>
            忘记密码？
          </a>
        </div>
      </div> -->

    </form>
  </div>

</div>

@section Scripts{
<script src="/sitefiles/assets/lib/md5-2.10.0.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/home/login.js" type="text/javascript"></script>
}